<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="user-scalable=no">
    <style>
        body {
            margin: 0;
            padding: 0;
            display: flex;
            align-items: center;
            flex-direction: column;
            position: relative;
            background: radial-gradient(at right center, rgb(56, 189, 248), rgb(49, 46, 129)) no-repeat;
            backdrop-filter: blur(1rem);
            box-sizing: border-box;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            -webkit-touch-callout: none;
            width: 100%;
            height: 100vh;
        }

        #lrc {
            width: 35rem;
            height: 70vh;
            overflow-y: auto;
            scrollbar-width: none;
            margin: .5rem 0;
        }

        #lrc p:first-child {
            margin-top: 12rem;
        }

        #lrc p:last-child {
            margin-bottom: 52rem;
        }


        #lrc::-webkit-scrollbar {
            display: none;
        }

        .start {
            width: 34rem;
            padding: 0 1rem;
            height: var(--start-height);
            border-radius: .5rem;
            position: absolute;
            display: flex;
            align-items: center;
            justify-content: space-between;
            user-select: none;
            -webkit-user-select: none;
            top: 9rem;
            transition: all .2s;
            z-index: -999;
        }

        .start.show {
            background-color: rgba(255, 255, 255, 0.1);
            cursor: pointer;
            z-index: 999;
        }

        .start .time,
        .start .icon {
            color: #fff;
            display: none;
            transition: all .2s;
        }

        .start .icon {
            width: 2rem;
            height: 2rem;
        }

        .start .line {
            width: 100%;
            margin: 0 1rem;
            height: .12rem;
            background-color: rgba(255, 255, 255, 0.2);
            opacity: 0;
            z-index: -999;
            transition: all .2s;
        }

        .start .time.show,
        .start .icon.show {
            display: block;
        }

        .start .line.show {
            opacity: 1;
        }

        #playBtn .circle {
            stroke-dasharray: 189;
            stroke-dashoffset: 189;
        }

        #playBtn .pause,
        #playBtn .play {
            display: none;
        }

        #playBtn .pause.show,
        #playBtn .play.show {
            display: block;
        }

        .progress-box {
            width: 35rem;
            position: relative;
        }

        .progress-box .progress-under,
        .progress-box .progress-mid,
        .progress-box .progress-top {
            height: .3rem;
            border-radius: .15rem;
            position: absolute;
            top: 0;
            left: 0;
            transform: translateY(1rem);
            transition: all .3s;
        }

        .progress-box .progress-under.scale,
        .progress-box .progress-mid.scale,
        .progress-box .progress-top.scale {
            height: .5rem;
            border-radius: .25rem;
        }

        .progress-box .progress-under {
            width: inherit;
            background-color: rgb(255, 255, 255, .3);
        }

        .progress-box .progress-mid {
            width: 0%;
            background-color: rgb(255, 255, 255, .5);
        }

        .progress-box .progress-top {
            width: 0%;
            background-color: rgb(255, 255, 255);
        }

        .progress-box .progress {
            width: 31rem;
            height: 2rem;
            cursor: pointer;
            transform: translateX(2rem);
        }

        .progress-box #showLyrc {
            width: 12rem;
            height: 11.5rem;
            background: radial-gradient(at right center, rgb(56, 189, 248), rgb(49, 46, 129)) no-repeat;
            backdrop-filter: blur(1rem);
            /* Safari 支持 */
            border-radius: .5rem;
            position: absolute;
            bottom: 2rem;
            left: calc(50% - 6rem);
            display: none;
            padding: .8rem 1.5rem;
            overflow: auto;
            scrollbar-width: none;
            box-shadow: inset 0 .2rem .6rem rgba(255, 255, 255, 0.4);
            transition: all .3s;
            user-select: none;
        }

        .progress-box #showLyrc.show {
            display: block;
        }

        .progress-box #showLyrc p {
            font-size: .6rem;
            line-height: .6rem;
            text-align: center;
            color: rgba(255, 255, 255, 0.2);
        }

        .progress-box #showLyrc p span {
            padding-right: 6px;
        }

        .progress-box #showLyrc p.tly_word {
            font-size: .6rem;
            line-height: .2rem;
        }

        .progress-box #showLyrc p.highlight,
        .progress-box #showLyrc p.highlight p.tly_word {
            color: #fff;
        }

        .progress-box #showLyrc p.highlight {
            background-color: rgb(255, 255, 255, .1);
            border-radius: .3rem;
            padding: .2rem .4rem;
        }

        .progress-box .progress-top .slider {
            width: .6rem;
            height: .6rem;
            border-radius: .3rem;
            background-color: rgb(255, 255, 255, 1);
            position: absolute;
            right: -.3rem;
            top: -.15rem;
            transition: all .3s;
            cursor: pointer;
        }

        .progress-box:hover .progress-top .slider {
            opacity: 1;
        }

        .progress-box .progress-top.scale .slider,
        .progress-box .progress-top .slider:hover {
            transform: scale(1.3);
        }

        .progress-box .time {
            width: 31rem;
            font-size: 1rem;
            display: flex;
            justify-content: space-between;
            transform: translateX(2rem);
            align-items: center;
            line-height: 2rem;
            color: #fff;
            transition: all .2s;
            user-select: none;
        }
    </style>

    <title>测试用例</title>
    <script>
        if (window.screen.width > 768) {
            // 这里以 768 像素为界限，可根据实际情况调整
            document.documentElement.style.fontSize = 15 + 'px';
        } else {
            // 移动端适配代码
            document.documentElement.style.fontSize =
                document.documentElement.clientWidth / 37.5 + 'px';
        }

    </script>
</head>

<body>
    <div id="startPlay" class="start" style="--start-height: 30px;">
        <span class="time">00:00</span>
        <p class="line"></p>
        <svg t="1737093853203" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="4662">
            <path
                d="M755.552 495.36l-384-296.672a31.936 31.936 0 0 0-51.552 25.28v593.504a32 32 0 0 0 51.552 25.28l384-296.704a32 32 0 0 0 0-50.656"
                fill="#ffffff" p-id="4663"></path>
        </svg>
    </div>

    <div id="lrc">
        <!--  歌词容器 -->
    </div>

    <div class="progress-box">
        <div class="progress">
            <div class="progress-under"></div>
            <div class="progress-mid"></div>
            <div class="progress-top">
                <div class="slider"></div>
            </div>
            <div id="showLyrc"></div>
        </div>
        <div class="time">
            <span class="now">00:00</span>
            <span class="total">00:00</span>
        </div>
    </div>

    <svg id="playBtn" width="64" height="64" viewBox="0 0 64 64">
        <path class="play show"
            d="M46.534 32.8174L26.4672 43.741C25.4676 44.2851 24.25 43.5616 24.25 42.4236V20.5764C24.25 19.4384 25.4676 18.7149 26.4672 19.259L46.534 30.1825C47.5778 30.7507 47.5778 32.2493 46.534 32.8174Z"
            fill="#fff" />

        <g class="pause">
            <rect x="22" y="19" width="6" height="25" rx="3" fill="#fff" />
            <rect x="36" y="19" width="6" height="25" rx="3" fill="#fff" />
        </g>

        <circle fill="none" cx="32" cy="32" r="30" stroke="rgb(255,255,255,.4)" stroke-width="4" />
        <circle fill="none" stroke="#fff" stroke-width="4" cx="32" cy="32" r="30" class="circle" stroke-linecap="round"
            transform="rotate(-90 32 32)" />
    </svg>


    <audio src="music/go-beyond.mp3" preload="metadata"></audio>


    <script src="./music-kit/music-kit.js"></script>
    <!-- <script src="./music-kit/music-kit.min.js"></script> -->

    <script>
        // 实现控制
        const oPlayBtn = document.querySelector('#playBtn'),
            oShowLyrc = document.querySelector('#showLyrc'),
            oAudio = document.querySelector('audio'),
            oProgressBox = document.querySelector('.progress-box'),
            oCircle = oPlayBtn.querySelector('.circle'),
            oPlay = oPlayBtn.querySelector('.play'),
            oPause = oPlayBtn.querySelector('.pause'),
            oProgress = oProgressBox.querySelector('.progress'),
            oNowTime = oProgressBox.querySelector('.time .now'),
            oTotal = oProgressBox.querySelector('.time .total'),
            oProgressUnder = oProgress.querySelector('.progress-under'),
            oProgressMid = oProgress.querySelector('.progress-mid'),
            oProgressTop = oProgress.querySelector('.progress-top'),
            oSlider = oProgressTop.querySelector('.slider'),
            oCLen = oCircle.getTotalLength();
        // 设置动态参数
        oAudio.src = `music/go-beyond.mp3?t=${Date.now()}`;

        // 初始化歌词
        // 假数据
        function getMusicData() {
            return {
                "sgc": false,
                "sfy": false,
                "qfy": false,
                "lrc": {
                    "version": 20,
                    "lyric": "{\"t\":0,\"c\":[{\"tx\":\"作词: \"},{\"tx\":\"Andy Love\"}]}\n{\"t\":1000,\"c\":[{\"tx\":\"作曲: \"},{\"tx\":\"Andy Love\"}]}\n[00:09.55]I’ve come so far, away from home\n[00:13.86]There’s no way I’m turning back now\n[00:17.39]My destination is unknown\n[00:21.53]So I’ll keep pushing never slow down\n[00:25.46]\n[00:25.47]A big blue sky, a pocket of dreams\n[00:29.51]A head full of hopes, possibilities\n[00:33.48]I’m taking a chance to reach for the stars, for the stars\n[00:39.77]\n[00:39.78]If I fall\n[00:44.31]Then I’ll get back up, try again, come back stronger\n[00:48.33]No walls, they build can stop me now\n[00:55.85]Let’s keep chasing the sun\n[00:58.11]Do what can’t be done\n[01:00.23]Let’s go beyond, go beyond\n[01:03.62]\n[01:03.63]Push the limits, take flight\n[01:06.09]We’ll break through the sky\n[01:08.20]And go beyond the stars\n[01:11.58]With every step we take\n[01:13.91]We’ll lead the way\n[01:16.01]These walls we’re breaking em’ down\n[01:19.76]And we’ll leave them all in the dust\n[01:23.62]New horizons waiting for us\n[01:27.48]because we, were made\n[01:30.83]To go beyond\n[01:33.86]\n[01:40.64]I won’t forget where I came from\n[01:44.75]I’ll use my past to build a future\n[01:48.76]Keep moving forwards, go beyond\n[01:52.82]What they call impossible\n[01:55.28]\n[01:55.29]If I fall\n[01:59.66]Then now I’ll get back up, try again, come back stronger\n[02:03.60]No walls, they build can stop me now\n[02:11.10]Let’s keep chasing the sun\n[02:13.53]Do what can’t be done\n[02:15.59]Let’s go beyond, go beyond\n[02:19.19]\n[02:19.20]Push the limits, take flight\n[02:21.36]We’ll break through the sky\n[02:23.46]And go beyond the stars\n[02:26.94]With every step we take\n[02:29.50]We’ll lead the way\n[02:31.45]These walls we’re breaking em’ down\n[02:34.97]And we’ll leave them all in the dust\n[02:38.35]To go beyond…..\n[02:40.73]\n[02:40.88]Expectations and dreams\n[02:42.73]To be stronger, to push harder, than before\n[02:48.66]It’s a time for change\n[02:51.30]We’re standing on the edge of great\n[02:57.05]\n[03:10.70]Let’s keep chasing the sun\n[03:13.04]Do what can’t be done\n[03:15.08]let’s go beyond, go beyond\n[03:18.60]Cause every step we take\n[03:21.06]We’ll lead the way\n[03:23.05]\n[03:23.06]These walls we’re breaking em’ down\n[03:26.54]And we’ll leave them all in the dust\n[03:30.52]New horizons waiting for us\n[03:34.24]because we, were made\n[03:37.81]To go beyond, beyond, beyond, go beyond\n"
                },
                "klyric": {
                    "version": 0,
                    "lyric": ""
                },
                "tlyric": {
                    "version": 18,
                    "lyric": "[00:09.55]为抵达更远的远方\n[00:13.86]我告诉自己要一往无前\n[00:17.39]前途充满未知\n[00:21.53]征途却从未止步\n[00:25.47]碧空如洗，梦满盈\n[00:29.51]满怀希望和信心\n[00:33.48]向着星辰，进发\n[00:39.78]不惧跌倒\n[00:44.31]每一次挑战，只会让我变得更加强大\n[00:48.33]没有什么能够阻止我\n[00:55.85]追逐太阳的步伐\n[01:00.23]一次次跨越，那些不可能\n[01:03.63]超越极限，傲视长空\n[01:06.09]冲上云霄\n[01:08.20]穿越星辰\n[01:11.58]步步踩实\n[01:13.91]我们终将引领时代\n[01:16.01]冲破藩篱\n[01:19.76]排除万难\n[01:23.62]迎接新的地平线\n[01:27.48]因为我们\n[01:30.83]为超越而生\n[01:33.86]\n[01:40.64]谨记来时路\n[01:44.75]过去的点滴铸就未来\n[01:48.76]持续前行，不断超越\n[01:52.82]创造无限可能\n[01:55.29]倘若跌倒\n[01:59.66]每一次挑战，只会让我变得更加强大\n[02:03.60]没有什么能够阻止我\n[02:11.10]追逐太阳的步伐\n[02:15.59]一次次跨越，那些不可能\n[02:19.20]超越极限，傲视长空\n[02:21.36]冲上云霄\n[02:23.46]穿越星辰\n[02:26.94]步步踩实\n[02:29.50]我们终将引领时代\n[02:31.45]冲破藩篱\n[02:34.97]排除万难\n[02:38.35]去超越……\n[02:40.73]\n[02:40.88]期待与梦想\n[02:42.73]给予我更强大的力量\n[02:48.66]去改变世界，\n[02:51.30]去拥抱伟大\n[02:57.05]\n[03:10.70]追逐太阳的步伐\n[03:15.08]一次次跨越，那些不可能\n[03:18.60]步步踩实\n[03:21.06]我们终将引领时代\n[03:23.06]排除万难\n[03:26.54]冲破困境\n[03:30.52]迎接新的地平线\n[03:34.24]因为我们，为超越而生"
                },
                "romalrc": {
                    "version": 0,
                    "lyric": ""
                },
                "yrc": {
                    "version": 15,
                    "lyric": "{\"t\":0,\"c\":[{\"tx\":\"作词: \"},{\"tx\":\"Andy Love\"}]}\n{\"t\":1000,\"c\":[{\"tx\":\"作曲: \"},{\"tx\":\"Andy Love\"}]}\n[9910,3840](9910,180,0)I(10090,30,0)’(10120,120,0)ve (10240,240,0)come (10480,330,0)so (10810,1020,0)far(11830,60,0), (11890,540,0)away (12430,450,0)from (12880,870,0)home\n[14080,3060](14080,270,0)There(14350,30,0)’(14380,90,0)s (14470,330,0)no (14800,630,0)way (15430,30,0)I(15460,30,0)’(15490,90,0)m (15580,480,0)turning (16060,480,0)back (16540,600,0)now\n[17680,3870](17680,360,0)My (18040,2100,0)destination (20140,300,0)is (20440,1110,0)unknown\n[21700,3750](21700,330,0)So (22030,270,0)I(22300,30,0)’(22330,30,0)ll (22360,450,0)keep (22810,720,0)pushing (23530,390,0)never (23920,630,0)slow (24550,900,0)down\n[25750,3840](25750,150,0)A (25900,450,0)big (26350,270,0)blue (26620,1230,0)sky(27850,0,0), (27850,90,0)a (27940,660,0)pocket (28600,120,0)of (28720,870,0)dreams\n[29770,3780](29770,90,0)A (29860,390,0)head (30250,330,0)full (30580,120,0)of (30700,750,0)hopes(31450,0,0), (31450,2100,0)possibilities\n[33700,6360](33700,30,0)I(33730,90,0)’(33820,120,0)m (33940,600,0)taking (34540,120,0)a (34660,1050,0)chance (35710,180,0)to (35890,330,0)reach (36220,240,0)for (36460,120,0)the (36580,1260,0)stars(37840,30,0), (37870,540,0)for (38410,150,0)the (38560,1500,0)stars\n[40090,4440](40090,390,0)If (40480,300,0)I (40780,3750,0)fall\n[44560,3960](44560,360,0)Then (44920,210,0)I(45130,30,0)’(45160,30,0)ll (45190,300,0)get (45490,420,0)back (45910,300,0)up(46210,0,0), (46210,450,0)try (46660,510,0)again(47170,0,0), (47170,330,0)come (47500,270,0)back (47770,750,0)stronger\n[48520,7290](48520,3510,0)No (52030,450,0)walls(52480,30,0), (52510,270,0)they (52780,510,0)build (53290,210,0)can (53500,510,0)stop (54010,360,0)me (54370,1440,0)now\n[56140,2280](56140,300,0)Let(56440,30,0)’(56470,60,0)s (56530,210,0)keep (56740,750,0)chasing (57490,150,0)the (57640,780,0)sun\n[58450,1920](58450,240,0)Do (58690,360,0)what (59050,330,0)can(59380,30,0)’(59410,60,0)t (59470,180,0)be (59650,720,0)done\n[60400,3570](60400,270,0)Let(60670,30,0)’(60700,60,0)s (60760,330,0)go (61090,1530,0)beyond(62620,30,0), (62650,390,0)go (63040,930,0)beyond\n[63970,2400](63970,420,0)Push (64390,180,0)the (64570,810,0)limits(65380,0,0), (65380,300,0)take (65680,690,0)flight\n[66400,2010](66400,180,0)We(66580,30,0)’(66610,30,0)ll (66640,480,0)break (67120,270,0)through (67390,150,0)the (67540,870,0)sky\n[68440,3390](68440,240,0)And (68680,390,0)go (69070,1080,0)beyond (70150,120,0)the (70270,1560,0)stars\n[71860,2490](71860,330,0)With (72190,360,0)every (72550,510,0)step (73060,270,0)we (73330,1020,0)take\n[74380,1860](74380,210,0)We(74590,30,0)’(74620,30,0)ll (74650,390,0)lead (75040,150,0)the (75190,1050,0)way\n[76270,3420](76270,360,0)These (76630,480,0)walls (77110,270,0)we(77380,30,0)’(77410,120,0)re (77530,630,0)breaking (78160,150,0)em(78310,30,0)’ (78340,1350,0)down\n[80050,3600](80050,270,0)And (80320,180,0)we(80500,60,0)’(80560,30,0)ll (80590,480,0)leave (81070,570,0)them (81640,270,0)all (81910,180,0)in (82090,150,0)the (82240,1410,0)dust\n[83890,3570](83890,390,0)New (84280,1260,0)horizons (85540,480,0)waiting (86020,330,0)for (86350,1110,0)us\n[87610,3600](87610,870,0)because (88480,1020,0)we(89500,330,0), (89830,480,0)were (90310,900,0)made\n[91210,3150](91210,180,0)To (91390,540,0)go (91930,2430,0)beyond\n[101110,3780](101110,240,0)I (101350,240,0)won(101590,30,0)’(101620,60,0)t (101680,1410,0)forget (103090,360,0)where (103450,150,0)I (103600,450,0)came (104050,840,0)from\n[105070,3660](105070,240,0)I(105310,30,0)’(105340,30,0)ll (105370,300,0)use (105670,300,0)my (105970,690,0)past (106660,120,0)to (106780,420,0)build (107200,60,0)a (107260,1470,0)future\n[108760,4050](108760,600,0)Keep (109360,630,0)moving (109990,1320,0)forwards(111310,0,0), (111310,240,0)go (111550,1260,0)beyond\n[112990,2460](112990,270,0)What (113260,240,0)they (113500,540,0)thought (114040,1410,0)possible\n[115540,4380](115540,300,0)If (115840,330,0)I (116170,3750,0)fall\n[119950,3960](119950,240,0)Then (120190,300,0)now (120490,30,0)I(120520,30,0)’(120550,30,0)ll (120580,300,0)get (120880,420,0)back (121300,300,0)up(121600,0,0), (121600,420,0)try (122020,540,0)again(122560,0,0), (122560,330,0)come (122890,270,0)back (123160,750,0)stronger\n[123910,7290](123910,3510,0)No (127420,420,0)walls(127840,60,0), (127900,240,0)they (128140,480,0)build (128620,210,0)can (128830,510,0)stop (129340,360,0)me (129700,1500,0)now\n[131500,2280](131500,300,0)Let(131800,30,0)’(131830,60,0)s (131890,210,0)keep (132100,780,0)chasing (132880,120,0)the (133000,780,0)sun\n[133810,1920](133810,270,0)Do (134080,360,0)what (134440,330,0)can(134770,30,0)’(134800,60,0)t (134860,180,0)be (135040,690,0)done\n[135760,3570](135760,270,0)Let(136030,30,0)’(136060,60,0)s (136120,330,0)go (136450,1560,0)beyond(138010,30,0), (138040,390,0)go (138430,900,0)beyond\n[139330,2400](139330,450,0)Push (139780,180,0)the (139960,780,0)limits(140740,0,0), (140740,300,0)take (141040,690,0)flight\n[141760,2010](141760,210,0)We(141970,30,0)’(142000,30,0)ll (142030,450,0)break (142480,270,0)through (142750,150,0)the (142900,870,0)sky\n[143830,3360](143830,210,0)And (144040,360,0)go (144400,1110,0)beyond (145510,120,0)the (145630,1560,0)stars\n[147220,2490](147220,360,0)With (147580,360,0)every (147940,450,0)step (148390,270,0)we (148660,1050,0)take\n[149740,1890](149740,240,0)We(149980,30,0)’(150010,30,0)ll (150040,360,0)lead (150400,180,0)the (150580,1050,0)way\n[151660,3420](151660,330,0)These (151990,480,0)walls (152470,210,0)we(152680,30,0)’(152710,180,0)re (152890,630,0)breaking (153520,150,0)em(153670,30,0)’ (153700,1380,0)down\n[155440,3360](155440,270,0)And (155710,180,0)we(155890,30,0)’(155920,30,0)ll (155950,510,0)leave (156460,570,0)them (157030,240,0)all (157270,180,0)in (157450,180,0)the (157630,1170,0)dust\n[158800,2280](158800,60,0)To (158860,510,0)go (159370,1410,0)beyond(160780,60,0)…(160840,120,0).(160960,120,0).\n[161080,2040](161080,1350,0)Expectations (162430,150,0)and (162580,540,0)dreams\n[163120,5910](163120,210,0)To (163330,210,0)be (163540,1530,0)stronger(165070,0,0), (165070,270,0)to (165340,330,0)push (165670,1440,0)harder(167110,0,0), (167110,240,0)than (167350,1680,0)before\n[169090,2430](169090,240,0)It(169330,30,0)’(169360,60,0)s (169420,90,0)a (169510,540,0)time (170050,450,0)for (170500,1020,0)change\n[171550,6270](171550,150,0)We(171700,30,0)’(171730,60,0)re (171790,870,0)standing (172660,450,0)on (173110,600,0)the (173710,510,0)edge (174220,330,0)of (174550,3270,0)great\n[190900,2430](190900,347,0)Let(191247,347,0)’(191594,347,0)s (191941,347,0)keep (192288,347,0)chasing (192635,347,0)the (192982,348,0)sun\n[193360,1920](193360,270,0)Do (193630,360,0)what (193990,330,0)can(194320,30,0)’(194350,60,0)t (194410,150,0)be (194560,720,0)done\n[195310,3450](195310,240,0)let(195550,30,0)’(195580,60,0)s (195640,360,0)go (196000,1080,0)beyond(197080,450,0), (197530,420,0)go (197950,810,0)beyond\n[198820,2460](198820,330,0)Cause (199150,360,0)every (199510,450,0)step (199960,270,0)we (200230,1050,0)take\n[201310,1920](201310,180,0)We(201490,30,0)’(201520,30,0)ll (201550,390,0)lead (201940,240,0)the (202180,1050,0)way\n[203260,3630](203260,360,0)These (203620,450,0)walls (204070,420,0)we(204490,30,0)’(204520,60,0)re (204580,510,0)breaking (205090,180,0)em(205270,30,0)’ (205300,1590,0)down\n[206950,3510](206950,240,0)And (207190,240,0)we(207430,30,0)’(207460,30,0)ll (207490,510,0)leave (208000,600,0)them (208600,240,0)all (208840,180,0)in (209020,180,0)the (209200,1260,0)dust\n[210790,3660](210790,450,0)New (211240,1200,0)horizons (212440,510,0)waiting (212950,360,0)for (213310,1140,0)us\n[214600,3540](214600,810,0)because (215410,1050,0)we(216460,360,0), (216820,480,0)were (217300,840,0)made\n[218140,10890](218140,180,0)To (218320,600,0)go (218920,1530,0)beyond(220450,300,0), (220750,1950,0)beyond(222700,150,0), (222850,3510,0)beyond(226360,0,0), (226360,480,0)go (226840,2190,0)beyond\n"
                },
                "ytlrc": {
                    "version": 3,
                    "lyric": "[00:09.910]为抵达更远的远方\n[00:14.080]我告诉自己要一往无前\n[00:17.680]前途充满未知\n[00:21.700]征途却从未止步\n[00:25.750]碧空如洗，梦满盈\n[00:29.770]满怀希望和信心\n[00:33.700]向着星辰，进发\n[00:40.090]不惧跌倒\n[00:44.560]每一次挑战，只会让我变得更加强大\n[00:48.520]没有什么能够阻止我\n[00:56.140]追逐太阳的步伐\n[01:00.400]一次次跨越，那些不可能\n[01:03.970]超越极限，傲视长空\n[01:06.400]冲上云霄\n[01:08.440]穿越星辰\n[01:11.860]步步踩实\n[01:14.380]我们终将引领时代\n[01:16.270]冲破藩篱\n[01:20.050]排除万难\n[01:23.890]迎接新的地平线\n[01:27.610]因为我们\n[01:31.210]为超越而生\n[01:41.110]谨记来时路\n[01:45.070]过去的点滴铸就未来\n[01:48.760]持续前行，不断超越\n[01:52.990]创造无限可能\n[01:55.540]倘若跌倒\n[01:59.950]每一次挑战，只会让我变得更加强大\n[02:03.910]没有什么能够阻止我\n[02:11.500]追逐太阳的步伐\n[02:15.760]一次次跨越，那些不可能\n[02:19.330]超越极限，傲视长空\n[02:21.760]冲上云霄\n[02:23.830]穿越星辰\n[02:27.220]步步踩实\n[02:29.740]我们终将引领时代\n[02:31.660]冲破藩篱\n[02:35.440]排除万难\n[02:38.800]去超越……\n[02:41.080]期待与梦想\n[02:43.120]给予我更强大的力量\n[02:49.090]去改变世界，\n[02:51.550]去拥抱伟大\n[03:10.900]追逐太阳的步伐\n[03:15.310]一次次跨越，那些不可能\n[03:18.820]步步踩实\n[03:21.310]我们终将引领时代\n[03:23.260]排除万难\n[03:26.950]冲破困境\n[03:30.790]迎接新的地平线\n[03:34.600]因为我们，为超越而生"
                },
                "code": 200
            };
        }

        console.log(LrcOrLyrcKit);

        const data = getMusicData();

        // 初始化普通歌词
        // LrcOrLyrcKit.init(
        //     {
        //         el: document.getElementById('lrc'),
        //         lyric_data: data.lrc.lyric,
        //         tlyric_lyric: data.tlyric.lyric,
        //         func: LrcOrLyrcKit.doLrcLyric,
        //         options: {
        //             baseColor: '#979797', hilightColor: '#fc3c49', fontSize: '1.2rem',
        //             lineHeight: '4rem', tlyricSize: '1.1rem', tlyricLineHeight: '.8rem',
        //             hilightBgColor: 'rgb(204, 204, 204, .2)'
        //         }
        //     }
        // );

        if (window.screen.width > 768) {
            // 这里以 768 像素为界限，可根据实际情况调整
            lineWidth = 400
        } else {
            lineWidth = 650
        }

        // 初始化逐字歌词
        LrcOrLyrcKit.init(
            {
                el: document.getElementById('lrc'),
                lyric_data: data.yrc.lyric,
                tlyric_lyric: data.ytlrc.lyric,
                func: LrcOrLyrcKit.doYrcLyric,
                options: {
                    baseColor: 'rgb(233, 235, 235, .5)',
                    poshilightColor: 'rgb(233, 235, 235, .5)',
                    hilightColor: '#fff',
                    fontSize: '1.2rem',
                    lineHeight: '1.8rem',
                    tlyricSize: '1rem',
                    tlyricLineHeight: '1.6rem',
                    hilightBgColor: 'rgb(204, 204, 204, .2)',
                    pMargin: '1rem'
                },
                lineWidth: lineWidth,
                bindAudio: oAudio,
                bindPlacePlay: {
                    startPlay: document.getElementById('startPlay'),
                    timeTag: document.querySelector('#startPlay .time'),
                    playTag: document.querySelector('#startPlay svg'),
                    lineDiv: document.querySelector('#startPlay .line'),
                    pcTimer: 1200, // PC端延迟回弹ms
                    mbTimer: 1200, // 移动端延迟回弹ms
                    timeTagTimer: 6000, // 点击播放的样式停留时长ms
                    startMoveCallBack: function () {
                        this.startPlay.classList.remove('show'); // 隐藏背景
                        this.playTag.classList.add('show'); // 显示播放图标
                        this.timeTag.classList.add('show'); // 显示时间
                        this.lineDiv.classList.add('show'); // 设置基准线显示
                    },
                    onMoveCallBack: function () {
                        this.timeTag.innerText = this.getMusicTime(this.nowLine.target_node.dataset.time); // 设置播放开始时间
                    },
                    stopMoveCallBack: function () {
                        this.lineDiv.classList.remove('show'); // 隐藏基准线
                        this.startPlay.classList.add('show'); // 显示背景
                        this.startPlay.style.setProperty('--start-height', `${this.targetRectHeight}px`); // 动态设置高度
                    },
                    unMoveCallBack: function () {
                        this.startPlay.classList.remove('show'); // 隐藏背景
                        this.playTag.classList.remove('show'); // 隐藏播放按钮
                        this.timeTag.classList.remove('show'); // 隐藏时间
                    },
                    clickCallBack: function () {
                        oPlay.classList.remove('show');
                        oPause.classList.add('show');
                        if (oAudio.paused) {
                            oAudio.play();
                        }
                    }
                }
            }
        );
        // 显示或隐藏翻译，默认显示
        // LrcOrLyrcKit.translation();

        // 绑定控件
        oPlayBtn.addEventListener('click', function () {
            oPlay.classList.toggle('show');
            oPause.classList.toggle('show');
            if (oAudio.paused) {
                oAudio.play();
            } else {
                oAudio.pause();
            }
        });
        MusicControl.init({
            el: oAudio,
            oPlay: oPlay,
            oPause: oPause,
            oTotal: oTotal,
            oNowTime: oNowTime,
            oSlider: oSlider,
            oProgress: oProgress,
            oProgressMid: oProgressMid,
            oProgressUnder: oProgressUnder,
            oProgressTop: oProgressTop,
            oShowLyrc: oShowLyrc,
            progressBarCallBack: function () {
                if (oAudio.currentTime > 0) {
                    oCircle.style.strokeDashoffset = oCLen - (oAudio.currentTime / oAudio.duration) * oCLen;
                } else {
                    oCircle.style.strokeDashoffset = oCLen + 1;
                }
            }
        });
    </script>
</body>

</html>